<template>
  <!-- 基本信息 -->
  <div>
    <div class="title-wrapper">
      <title-name :title="title"></title-name>
      <a-icon
        v-if="showPlanBoardVisible"
        :type="planBoardVisible ? 'up' : 'down'"
        @click="planBoardVisible = !planBoardVisible"
      />
    </div>
    <div  v-if="planBoardVisible">
      <!-- 表格 -->
      <a-table bordered :data-source="dataSource" :columns="columns" rowKey="id" size="default" style="width: 100%; overflow-x: auto;margin-bottom: 30px;" :pagination="false">
        <!-- 检查结果 -->
        <template slot="result" slot-scope="text, record, index">
          <span>{{ record.checkStatus === 'COMPLETE' ? (text ? text.name : '') : '' }}</span>
        </template>
        <!-- 状态 -->
        <template slot="checkStatus" slot-scope="text, record, index">
          <span>{{ statusMap[text] ? statusMap[text].label : '' }}</span>
        </template>
        <template
          slot="action"
          slot-scope="text, record, index"
        >
        <a class="base-btn" v-if="record.checkStatus === 'COMPLETE'" @click="lookDetail(record)">查看</a>
        </template>
      </a-table>
    </div>
  </div>
</template>
  
<script>
const statusMap = [
  {
    value: 'STAY',
    label: '未开始检查',
    color: 'gray'
  },
  {
    value: 'CONDUCT',
    label: '待检查',
    color: 'green'
  },
  {
    value: 'COMPLETE',
    label: '检查完成',
    color: 'green'
  },
  {
    value: 'NOT_COMPLETE',
    label: '检查未完成',
    color: 'red'
  },
  {
    value: 'DRAFT',
    label: '待提交',
    color: 'green'
  },
]
const columns = [
    {
        title: '整改人',
        dataIndex: 'changeName',
    },
    {
        title: '检查人',
        dataIndex: 'employeeName',
    },
    {
        title: '责任人',
        dataIndex: 'verifierName',
    },
    {
        title: '生效日期',
        dataIndex: 'riskMonitorDate',
    },
    {
        title: '检查时限',
        dataIndex: 'riskMonitorTimeLimit',
    },
    {
        title: '检查时间',
        dataIndex: 'checkDate',
    },
    {
        title: '状态',
        dataIndex: 'checkStatus',
        scopedSlots: { customRender: 'checkStatus' },
    },
    {
        title: '检查结果',
        dataIndex: 'result',
        scopedSlots: { customRender: 'result' },
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: 150,
    },
    
]
export default {
  name: 'a' + Date.now(),
  components: {
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    // 是否需要检查时限
    showRiskMonitorTimeLimit: {
      type: Boolean,
      default: () => true
    },
    // 数据
    dataSource: {
      type: Array,
      default: () => []
    },
    // 是否显示箭头
    showPlanBoardVisible: {
      type: Boolean,
      default: () => false
    },
    // 默认展开
    defaultPlanBoardVisible: {
      type: Boolean,
      default: () => true
    }
  },
  watch: {
    defaultPlanBoardVisible: {
      handler(val) {
        this.planBoardVisible = val
      },
      immediate: true,
      deep: true
    },
    'form.projectId': {
      handler(val) {
        if (val) {
          this.riskMonitorPlangetEmoById()
        }
      },
      immediate: true,
      deep: true
    },
      
  },
  data() {
    if (this.showRiskMonitorTimeLimit) {
      this.columns = columns
    } else {
      this.columns = columns.filter(item => item.dataIndex !== 'riskMonitorTimeLimit')
    }
    this.statusMap = {}
    statusMap.forEach(item => {
      this.statusMap[item.value] = {
        label: item.label,
        color: item.color
      }
    })
    return {
      organizePeopleList: [],
      currentDate: new Date(),
      planBoardVisible: false
    }
  },
  created() {
  },
  methods: {
     // 关联质量检查信息查看
     lookDetail(record){
      this.$router.push({
        name: 'newRecordInfo',
        query: {
          id: record?.id,
          qualityInspectionRecord: false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .titleName {
    margin: 0;
  }
  .anticon {
    margin-left: 5px;
    font-size: 18px;
  }
}
</style>